import React, { useContext } from 'react';
import { useCanvas, useCanvasLayout } from '../DesignerHooks';

import './styles.less';
import { Point } from '@topology/core';
import { DesignerContext } from '../DesignerHooks';

window.Point = Point;

interface ICanvasType {
  id: string;

  initSize: {
    width?: number;
    height?: number;
  };
}

export const Canvas: React.FC<ICanvasType> = ({ id, initSize }) => {
  const context = useContext(DesignerContext);

  const { size } = useCanvasLayout('design-canvas-layout', context, initSize); //侦听屏幕大小以及屏幕大小变化改变画布大小
  useCanvas(context, id); //初始化画布

  return (
    <div
      id={id}
      style={{
        position: 'relative',
        ...size,
      }}
    ></div>
  );
};
